<template>
	<view class="container">
		<input class="inputs" 
		placeholder="输入申请姓名，错误的输入会影响最终结果。" 
		v-if="!disabled"
		v-model="name"
		maxlength="4"
		></input>
		<button 
			class="buttons"
			type="primary"
			@click="handleClick"
			v-if="!disabled"
		>
			抽取
		</button>
		<text
		class="texts"
		v-if="enable"
		>
		{{ thetext }}
		</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				year: 0,
				month: 0,
				day: 0,
				hour: 0,
				minute: 0,
				second: 0,
				disabled: false,
				result: "没抽中",
				voucher: "",
				enable: false,
				thetext: ""
			}
		},
		methods: {
			getTime() {
				const date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth();
				this.day = date.getDay();
				this.hour = date.getHours();
				this.minute = date.getMinutes();
				this.second = date.getSeconds();
			},
			getResult() {
				return Math.floor(Math.random() * 10) + 1;
			},
			handleClick() {
				if ( this.name == "" ) {
					uni.showToast({
						title: '输入了非法的数据',
						icon:'error'
					});
				} else {
					this.disabled = true;
					uni.showToast({
						title: '正在处理……',
						icon:'loading'
					});
					setTimeout(() => {
					  this.next();
					}, 2000);
				}
			},
			next() {
				this.getTime()
				if ( this.getResult() >= 1 && this.getResult() <= 3 ) {
					this.result = "抽中了"
				}
				this.year += 114
				this.month += 514
				this.day += 1919
				this.hour += 11
				this.minute += 45
				this.second += 14
				this.voucher = this.name + " " + this.result + " " + this.year + " " + this.month + " " + this.day + " " + this.hour + " " + this.minute + " " + this.second
				this.voucher = encodeURI( this.voucher )
				this.thetext = "您的凭证为:\n" + this.voucher + "\n请将该凭证截图至群主"
				this.enable = true
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	
	.inputs {
		position: absolute;
		top: 30%; /* 向上偏移30% */
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%; /* 增加宽度 */
		padding: 20rpx;
		border: 1px solid #e0e0e0;
		border-radius: 20rpx;
		text-align: center;
	}
		
	.buttons {
		position: absolute;
		top: 70%; /* 向下偏移30% */
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		background-color: #007AFF;
	}
	
	/* 修复类名匹配问题 */
	.buttons:active {
		opacity: 0.9;
		transform: translate(-50%, -50%) scale(0.96);
	    box-shadow: 0 4px 8px rgba(26, 41, 128, 0.25);
	}
	
	.texts {
		position: absolute;
		white-space: pre-wrap;       /* 保留空白符序列，正常换行 */
		word-wrap: break-word;      /* 长单词自动换行 */
        word-break: break-word;     /* 在单词内部换行 */
		line-height: 1.8;           /* 增加行高 */
		font-size: 18px;
        color: #333;
	}
</style>